<!DOCTYPE html>
<html lang="zh-cn" >
<head>
<title>数据交换单元发布</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<#include "../../../__ref_common.ftl" parse=true/>
<style>
.el-form--inline .el-form-item {
    margin-bottom: 5px;
}
.el-table .el-table__body-wrapper button.el-button {
    height: 26px;
    font-size: 12px;
    width: auto;
}
.el-table .el-table__body-wrapper .el-button+.el-button {
    margin-left: 2px;
}
.layout .el-form {
    text-align: left;
    margin-bottom: 10px;
}
.el-form--inline .el-form-item {
    margin-bottom: 5px;
}
.button-group .el-form-item__content {
    margin-left: 0px!important;
}

.elx-content .content-header .content-add-button {
    background: #47B2FB;
    width: 42px;
    height: 42px;
    text-align: center;
    float: right;
    display: none;
}
</style>
</head>
<body>
<div id="main" >
    <elx-content :location-origin="origin"  @end-load="endLoad" @back-href="backHref" :src="src" :type="type" :list-title="'数据交换单元发布'" :create-title="'数据交换单元创建'">
        <div slot="content" id="content" class="layout" >
            <el-form :inline="true"   class="demo-form-inline" >
                <el-form-item  label="单元编码" >
                    <el-input v-model="queryCond.unitCode"  placeholder="请填写单元编码"></el-input>
                </el-form-item>
                <el-form-item  label="单元名称" >
                    <el-input v-model="queryCond.label"  placeholder="请填写单元名称"></el-input>
                </el-form-item>
                <el-form-item  label="单元类型"   >
                    <el-select v-model="queryCond.unitType"    placeholder="单元类型">
                        <el-option v-for="item in unitTypes"   :label="item.name" :value="item.value"></el-option>
                    </el-select >
                </el-form-item>
                <el-form-item  label="状态"   >
                    <el-select v-model="queryCond.state"   placeholder="状态">
                        <el-option v-for="item in states"   :label="item.name" :value="item.value"></el-option>
                    </el-select >
                </el-form-item>
                <el-form-item class="button-group">
                    <el-button type="info" icon="search" @click.native="getTableData">查询</el-button>
                </el-form-item>
            </el-form>

            <el-table :data="tableData" v-loading="loading" border style="width:100%"  @row-dblclick="">
                <el-table-column label="单元编号" show-overflow-tooltip property="id" align="center"></el-table-column>
                <el-table-column label="单元编码" show-overflow-tooltip property="unitCode" align="center"></el-table-column>
                <el-table-column label="单元名称" show-overflow-tooltip property="label" align="center"></el-table-column>
                <el-table-column label="单元类型" show-overflow-tooltip property="unitType" align="center" :formatter="unitTypeFormatter"></el-table-column>
                <el-table-column label="创建用户" show-overflow-tooltip  property="createUser" align="center"></el-table-column>
                <el-table-column label="创建时间" show-overflow-tooltip property="createDate" align="center"></el-table-column>
                <el-table-column label="状态"  show-overflow-tooltip property="state" align="center"  :formatter="stateFormatter"></el-table-column>

                <el-table-column label="操作" width="150" align="center">
                    <template scope="scope">
                        <el-button size="small" @click="viewUnit(scope.row)">查看</el-button>
                        <el-button size="small" type="primary"  v-if="scope.row.state=='3'" @click="handlePublish(scope.row)">上线</el-button>
                        <el-button size="small" type="danger"  v-if="scope.row.state=='4'"  @click="handleOffline(scope.row)">下线</el-button>
                    </template>
                </el-table-column>

            </el-table>
            <div class="paginationCommon">
                <el-pagination
                        @current-change="handleCurrentChange"
                        :page-size="pageSize"
                        layout="total, prev, pager, next, jumper"
                        :current-page="pageNum"
                        :total="total">
                </el-pagination>
            </div>
        </div>
    </elx-content>
</div>
<script type="text/javascript">
    var _contextPath = '${mvcPath}';
    var vm = new Vue({
        el: "#main",
        data: function () {
            return {
            	origin: window.location.origin,
                formLabelWidth: '120px',
                tableData: [],
                queryCond: {
                	unitCode: '',
                    label: '',
                    unitType: '',
                    state: '',
                },
                src:  '${mvcPath}/datastash/workshop/unit/creator',
                type: 'list',
                unitTypes: [
                    {name: '采集', value: '1'},
                    {name: '分发', value: '2'},
                    {name: '流控', value: '3'}
                ],
                states:[
                    {name: '全部', value: '3,4'},
                    /*
                    {name: '开发', value: '0'},
                    {name: '生效', value: '1'},  */
/*
                    {name: '失效', value: '2'},
*/
                    {name: '待上线', value: '3'},
                    {name: '待下线', value: '4'},
                ],
                loading: false,
                pageNum: 1,
                pageSize: 10,
                total: 0
            }
        },
        methods:{
            getTableData:function () {
                var _self = this;
                var stateStr=_self.queryCond.state?_self.queryCond.state:'3,4';
                axios.get(_contextPath + '/open/datastash',{
                	params: {
                	    state: stateStr,
                	    unitType: _self.queryCond.unitType,
                	    label: _self.queryCond.label,
                	    unitCode: _self.queryCond.unitCode,
                	    pageNum: _self.pageNum-1,
                	    pageSize: _self.pageSize 
             		}
                })
                .then(function (response) {
                	var data = response.data;
                	console.log(data)
                    if (data) {
                    	_self.tableData = data.content;
                        _self.total = data.totalElements;
                    }
                })
                .catch(function (error) {
                	console.log(error);
                });
            },
            handlePublish:function(row){
                var _self=this;
                axios.get(_contextPath+'/open/datastash/unit/online/'+row.id,{ })
                .then(function (response) {
                    var data = response.data;
                    console.log(data)
                    if(data.success) {
                        _self.$notify({
                            type: 'success',
                            title: '成功！',
                            message: '发布成功',
                            duration: 3000
                        });
                        _self.getTableData();
                    }else {
                        _self.$notify({
                            type: 'error',
                            title: '发布失败！',
                            message: data.msg,
                            duration: 3000
                        });
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
            },
            handleOffline:function(row){
                var _self=this;
                axios.get(_contextPath+'/open/datastash/unit/offline/'+row.id,{ })
                .then(function (response) {
                    var data = response.data;
                    console.log(data)
                    if(data.success) {
                        _self.$notify({
                            type: 'success',
                            title: '成功！',
                            message: '下线成功',
                            duration: 3000
                        });
                        _self.getTableData();
                    }else {
                        _self.$notify({
                            type: 'error',
                            title: '下线失败！',
                            message: data.msg,
                            duration: 3000
                        });
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
            },
            unitTypeFormatter:function (val) {
                for(var i in this.unitTypes){
                    if( this.unitTypes[i].value==val.unitType){
                        return this.unitTypes[i].name;
                    }
                }
            },
            stateFormatter:function (val) {
                for(var i in this.states){
                    if( this.states[i].value==val.state){
                        return this.states[i].name;
                    }
                }
            },
            viewUnit:function (val) {
                this.src  ='${mvcPath}/datastash/workshop/unit/'+val.id;
                this.type = "create";
            },
            endLoad: function(){
                this.src  ='${mvcPath}/datastash/workshop/unit/creator';
            },
            backHref: function(){
                this.getTableData();
                this.type = "list";
            },
            handleCurrentChange: function(val) {
                this.pageNum = val;
                this.getTableData();
            }

        },
        watch: {
        },
        created: function () {
            this.getTableData();
        }
    })
</script>
</body>
</html>